import React, { useContext, useState } from 'react';
import { Alert, Dimensions, View } from 'react-native';
import { Button, Icon, Input, Text, Overlay } from 'react-native-elements';

import LocaleContext from '../libs/locale';
import WalletContext, { checkPassword } from '../libs/wallet';

const {width,height} = Dimensions.get("window");

const AuthDialog = ({ visible, onClose }: any) => {
  const locale: any = useContext(LocaleContext);
  const wallet: any = useContext(WalletContext);
  const [pwdVisible, setPwdVisible] = useState(false);
  const [pwd, setPwd] = useState('');
  const [error, setError] = useState('');

  const onOK = async () => {
    if (!checkPassword(wallet, pwd)) {
      setError(locale?._('Import.passwordError'));
      return;
    }
    onClose(true);
  };

  return (
    <Overlay isVisible={visible} >
        <View style={{width: width-50}}>
          <Text style={{
            fontWeight: 'bold',
            fontSize: 18,
          }}>{locale._('AuthDialog.please')}</Text>
          <View style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginTop: 10
          }}>
            <Icon type='foundation' name='key' size={16} />
            <Text style={{ marginLeft: 4 }}>{locale._('AuthDialog.pleaseEnterPassword')}</Text>
          </View>
          <Input
            placeholder={locale?._('Import.password')}
            rightIcon={<Icon
              name={pwdVisible ? 'eye' : 'eye-off'}
              type='feather'
              onPress={() => setPwdVisible(!pwdVisible)}
            />}
            secureTextEntry={!pwdVisible}
            errorMessage={error}
            onChangeText={value => setPwd(value)}
          />
          <View style={{ flexDirection: 'row' ,justifyContent:"space-between",marginTop:-10}}>
            <Button
              type='outline'
              title={locale?._('cancel')}
              buttonStyle={{ width: 130, height:40, borderColor: '#7460E3FF' }}
              titleStyle={{ color: '#7460E3FF' ,fontSize:15,width:"80%",height:25}}
              onPress={() => { setError(''); onClose(false); }}
            />
            <Button
              title={locale?._('ok')}
              buttonStyle={{ width: 130, height:40,backgroundColor: '#7460E3FF' }}
              titleStyle={{fontSize:15,width:"80%",height:25}}
              onPress={onOK}
            />

          </View>
        </View>
      </Overlay>
  );
};

export default AuthDialog;
